<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form">
          <div class="mainor_te">
            <router-link to="/marketing/timelimit/add">
              <el-button type="primary">新增活动</el-button></router-link
            >
          </div>
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="活动名称" prop="title">
              <el-input
                v-model.trim="form.title"
                placeholder="活动名称"
                clearable
                class="wid220"
              ></el-input>
            </el-form-item>

            <el-form-item label="活动状态" prop="status">
              <el-select
                v-model.trim="form.status"
                placeholder="活动状态"
                class="wid220"
              >
                <el-option label="所有" :value="parseInt(0)"></el-option>
                <el-option
                  v-for="(item, index) in status_list"
                  :key="index"
                  :label="item"
                  :value="parseInt(index) + 1"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户分组" prop="group_id">
              <el-select
                v-model.trim="form.group_id"
                placeholder="用户分组"
                class="wid220"
              >
                <el-option label="所有" :value="parseInt(0)"></el-option>
                <el-option
                  v-for="(item, index) in group"
                  :label="item"
                  :value="index"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间" prop="sendTime">
              <el-date-picker
                v-model="sendTime"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <div class="clearfix"></div>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_table marginTop10" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            :header-cell-class-name="this.$verticaline"
          >
            <el-table-column
              label="活动名称"
              align="center"
              prop="name"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              label="活动时间"
              align="center"
              prop="activityTime"
              show-overflow-tooltip
              min-width="180"
            />
            <el-table-column
              label="用户分组"
              align="center"
              prop=""
              width="300"
            >
              <template slot-scope="scope">
                <el-tag
                  v-for="item in scope.row.group_ids"
                  :key="item"
                  type="success"
                  style="margin: 2px 3px"
                  >{{ group[item] }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column align="center" label="活动状态" width="120">
              <template slot-scope="scope">
                <span :class="'status' + scope.row.status">
                  {{ status_list[scope.row.status] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="限购规划"
              align="center"
              prop=""
              show-overflow-tooltip
              width="120"
            >
              <template slot-scope="scope">
                <span
                  :style="{
                    color: scope.row.is_limit == 0 ? '#03a98e' : '#f56c6c',
                  }"
                  >{{ scope.row.is_limit == 1 ? "限购" : "不限购" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="参与订单"
              align="center"
              prop="order_num"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              label="创建时间"
              align="center"
              prop="name"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                {{ parseTime(Number(scope.row.created_at) * 1000) }}
              </template>
            </el-table-column>
            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="240"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <router-link :to="'/marketing/timelimit/see/' + scope.row.id">
                  <el-link type="success">查看</el-link>
                </router-link>
                <router-link
                  :to="
                    '/marketing/timelimit/edit/' + scope.row.id + '?type=copy'
                  "
                >
                  <el-link type="success">复制</el-link>
                </router-link>
                <router-link :to="'/marketing/timelimit/edit/' + scope.row.id">
                  <el-link
                    v-if="scope.row.status == 2 || scope.row.status == 0"
                    type="success"
                    >编辑</el-link
                  >
                </router-link>
                <!-- <el-link type="success" @click="handlePromote">推广</el-link> -->
                <el-link
                  type="danger"
                  v-show="scope.row.status !== 3"
                  @click="handleClose(scope.row.id)"
                  >关闭</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
        <!-- 发放优惠券 -->
        <el-dialog
          title="优惠券发放"
          :visible.sync="grantDiaVisible"
          class="main_dialog dialog900"
        >
          <div class="mainor_form">
            <el-form
              :inline="true"
              :model="grant_form"
              class="demo-form-inline"
              ref="userListFrom"
              label-width="70px"
            >
              <el-form-item label="" prop="name">
                <el-input
                  v-model.trim="grant_form.name"
                  placeholder="用户名称"
                  clearable
                  class="wid220"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="name">
                <el-input
                  v-model.trim="grant_form.name"
                  placeholder="用户分组"
                  clearable
                  class="wid220"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="name">
                <el-input
                  v-model.trim="grant_form.name"
                  placeholder="用户区域"
                  clearable
                  class="wid220"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="name">
                <el-input
                  v-model.trim="grant_form.name"
                  placeholder="业务员"
                  clearable
                  class="wid220"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="reset marginLeft10"
                  type="primary"
                  @click="reset"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  @click="getArticleList"
                  :loading="listLoading"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="tips">剩余可发放数量：<em>150</em></div>
          <div class="main_table">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="list"
              element-loading-text="加载中"
              fit
              border
              highlight-current-row
              :header-cell-class-name="this.$verticaline"
            >
              <el-table-column
                label="用户名称"
                align="center"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                label="手机"
                align="center"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                label="已领取数量"
                align="center"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                label="发放数量"
                align="center"
                prop="name"
                show-overflow-tooltip
                min-width="120"
              >
                <template>
                  <el-input-number
                    v-model="num"
                    :min="0"
                    :controls="false"
                  ></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="main_page boxdq">
            <!-- 分页 -->
            <div></div>
            <div class="main_page_r">
              <el-pagination
                :current-page="current.page"
                :page-sizes="[50, 100, 200]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                background
                @size-change="changeLimit"
                @current-change="changePage"
              />
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="grantDiaVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="grantDiaVisible = false"
              v-repeatClick
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  get_panic_index,
  get_panic_closeActivity,
  get_panic_base,
} from "@/api/marketing/marketing_timelimit.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import { puzzleImg } from "@/api/currency";

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  data() {
    return {
      // 时间
      parseTime,
      puzzleImg,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: [],
      status_list: [],
      type_list: {},
      group: {},
      listLoading: false,
      // 搜索
      form: {
        start_time: "",
        end_time: "",
        type: null,
        status: null,
        title: "",
        group_id: "",
      },
      sendTime: [],
      // 全选
      selectArr: [],
      // 发放优惠券
      grantDiaVisible: false,
      grant_form: {
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
        type: null,
        status: null,
        name: "",
      },
      num: "",
    };
  },
  created() {
    this.get_panic_base();
    // 列表
    this.get_panic_index();
  },
  methods: {
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.get_panic_index();
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.sendTime = [];
      this.get_panic_index();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.get_panic_index();
    },
    changePage(page) {
      this.current.page = page;
      this.get_panic_index();
    },
    // 列表
    get_panic_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      get_panic_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.list.data.map((e) => {
            let time1 = this.parseTime(Number(e.start_time) * 1000);
            let time2 = this.parseTime(Number(e.end_time) * 1000);
            e.activityTime = time1 + " 至 " + time2;
            e.group_ids = e.group_ids.split(",");
          });
          this.totalCount = res.data.list.total;
          this.list = res.data.list.data;
          this.status_list = res.data.status_list;
          this.type_list = res.data.type_list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.start_time = this.sendTime ? this.sendTime[0] : "";
      form.end_time = this.sendTime ? this.sendTime[1] : "";
      return form;
    },
    // 获取用户分组
    get_panic_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      get_panic_base(data).then((res) => {
        if (res.errcode == 0) {
          this.group = res.data.group;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 关闭
    handleClose(id) {
      this.$confirm(
        "活动关闭后无法恢复, 已参与活动的订单不受影响，确认关闭?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            {
              id: id,
            }
          );
          get_panic_closeActivity(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("关闭成功");
              this.get_panic_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 推广
    handlePromote() {
      this.$message.warning("等前端做完再做");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 120px);
  }
  .main_num {
    .mainsu_te {
      position: relative;
      top: -1px;
    }
  }
}
/deep/.el-progress-bar__innerText {
  transform: translateY(-1px);
}
.main_dialog {
  .main_table {
    /deep/.el-table__body-wrapper {
      overflow-y: auto;
      height: 400px;
    }
  }
  .main_xq ul li {
    width: 33.33%;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .progress_list {
    margin-top: 10px;
    p {
      height: 24px;
      line-height: 24px;
    }
    .progress_list_red {
      color: red;
    }
    .progress_list_su {
      color: #03a98e;
    }
  }
}

.type1 {
  color: #03a98e;
}
.type2 {
  color: #aacd6e;
}

.status0 {
  color: #aacd6e;
}
.status1 {
  color: #03a98e;
}
.status2 {
  color: #f56c6c;
}
.status3 {
  color: #cccccc;
}
/deep/ .main_table .el-table--small td .cell {
  height: auto;
  white-space: normal !important;
  p {
    margin: 0 5px;
    background-color: #f0f9eb;
    color: #67c23a;
    padding: 2px 0;
  }
  .goods_data_span {
    background-color: #fef0f0;
    color: #f56c6c;
    padding: 2px;
    margin-right: 2px;
    margin-bottom: 5px;
    display: inline-block;
  }
}
</style>
